Easy2Siksha.com
GNDU Question Paper-2024
BCA 5
th
Semester
WEB TECHNOLOGIES
Time Allowed: Three Hours Max. Marks: 75
Note: Attempt Five questions in all, selecting at least One question from each section. The
Fifth question may be attempted from any section. All questions carry equal marks.
SECTION-A
1. What are features and advantages of HTML 5? How can you include multimedia
elements in a web page using HTML 5? Give example.
2. Create a form with two text boxes and a button. Using Java Script, on the click of
button, calculate factorial of number given in first text box and show output in second
text. Add validations.
SECTION-B
3. Explain various inbuilt string and file handling functions available in PHP.
4. (a) Explain Session Management in PHP.
(b) What is a Cookie? What is its use? Write script in PHP to create and read a cookie.
SECTION-C
5. Which are reasons to use AL and ML in websites ?
Easy2Siksha.com
6. Which are different types of hosting? Give steps to host your website on a remote
server.
SECTION-D
7. What is difference between AR and VR? How are these helpful in websites?
8. What are advantages and disadvantages of SPA? How is Angular JS helpful in
creating SPA websites?
GNDU Answer Paper-2024
BCA 5
th
Semester
WEB TECHNOLOGIES
Time Allowed: Three Hours Max. Marks: 75
Note: Attempt Five questions in all, selecting at least One question from each section. The
Fifth question may be attempted from any section. All questions carry equal marks.
SECTION-A
1. What are features and advantages of HTML 5? How can you include multimedia
elements in a web page using HTML 5? Give example.
Ans: Imagine for a moment that the internet is like a huge city. Each website is a house,
office, or shop in this city. Now, every house needs a blueprint or structure so that it can be
built properly. This blueprint of a website is made with HTML (HyperText Markup
Language).
For many years, people used older versions of HTML to build their websites. But those older
versions had some problems. They were like old houses – strong, yes, but not very stylish.
They could not easily handle videos, music, animations, or modern designs. You had to bring
in extra “helpers” like Flash or other plugins to make things work.
Easy2Siksha.com
Then came HTML5, like a modern architect who said:
“Don’t worry, I’ll give you a better design! I’ll make it easier for you to create websites that
can sing, dance, and tell stories without needing extra helpers.”
That’s how HTML5 became popular – it brought new features, advantages, and multimedia
options that made the internet more alive and user-friendly.
Features of HTML5
Let’s think of the features as special tools inside the architect’s toolkit.
1. New Semantic Tags
HTML5 introduced new tags like <header>, <footer>, <article>, <section>, and <nav>.
These tags make the structure of a webpage more meaningful. It’s like labeling
rooms in a house as “kitchen,” “bedroom,” and “living room” instead of just calling
them “room1, room2, room3.”
2. Audio and Video Support
Before HTML5, you needed plugins like Flash to play music or videos. HTML5 gave us
<audio> and <video> tags, so you can play media directly in the browser.
3. Canvas and SVG (Scalable Vector Graphics)
The <canvas> element allows you to draw shapes, charts, or even games directly on
the webpage. SVG allows scalable images that don’t lose quality when zoomed in.
4. Geolocation API
HTML5 can detect the user’s location (with permission). That’s why apps like Google
Maps can show where you are.
5. Offline Storage (Local Storage & Session Storage)
Earlier, websites used cookies to save small bits of data. HTML5 introduced local
storage and session storage, which can store more data securely inside the browser
without needing servers.
6. Responsive Design Support
With HTML5, websites can adjust themselves according to screen size – desktop,
tablet, or mobile.
7. Form Enhancements
New input types like email, date, range, and number were added. This makes forms
easier and smarter. For example, if you use type="email", the browser itself checks if
the email format is correct.
Advantages of HTML5
Now, let’s talk about the benefits that made HTML5 a superstar in the web world.
Easy2Siksha.com
1. No More Plugins Needed
Say goodbye to Flash or Silverlight. HTML5 can play videos, audio, and animations
without any external software.
2. Cross-Platform Compatibility
Works smoothly on desktops, tablets, and smartphones. That’s why you can watch
YouTube videos or play online games on your phone with ease.
3. Better for SEO (Search Engine Optimization)
Search engines love semantic tags because they clearly explain the structure of a
website. This helps websites rank better in Google.
4. Faster and Lighter
HTML5 websites load faster because they don’t need heavy plugins.
5. Improved User Experience
With features like responsive design, interactive graphics, and multimedia support,
users feel more connected and engaged.
6. Offline Browsing
Using local storage, users can still interact with some parts of a website even if the
internet goes down.
Adding Multimedia in HTML5
This is where the fun begins! HTML5 lets us add audio and video directly using simple tags.
Let’s see how:
1. Adding a Video
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Video Example</title>
</head>
<body>
<h2>My HTML5 Video</h2>
<video width="400" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
In this code:
• <video> is the container.
• controls adds play, pause, and volume buttons.
• Multiple <source> tags are used for different formats.
Easy2Siksha.com
2. Adding an Audio File
<!DOCTYPE html>
<html>
<head>
<title>HTML5 Audio Example</title>
</head>
<body>
<h2>My HTML5 Audio</h2>
<audio controls>
<source src="song.mp3" type="audio/mpeg">
<source src="song.ogg" type="audio/ogg">
Your browser does not support the audio tag.
</audio>
</body>
</html>
Here:
• <audio> is the container.
• controls gives play/pause buttons.
Diagram: HTML5 Features at a Glance
Here’s a simple diagram for clarity:
This diagram shows how HTML5 branches out into multiple powerful features.
Wrapping Up the Story
Easy2Siksha.com
So, if we look back at our “internet city” story:
• Older HTML was like plain houses.
• HTML5 is like modern smart homes – with music systems, video screens, automatic
lights, and navigation support built right inside.
By introducing features like semantic tags, multimedia support, storage, and responsive
design, HTML5 has truly transformed the web into an interactive, multimedia-rich, and
user-friendly space.
And the best part? Anyone with basic coding knowledge can add videos, music, or even
interactive drawings to their website without much effort.
That’s why HTML5 is not just a version upgrade – it’s like giving the web a new heart and
soul.
2. Create a form with two text boxes and a button. Using Java Script, on the click of
button, calculate factorial of number given in first text box and show output in second
text. Add validations.
Ans: Creating a Factorial Calculator Form with JavaScript
A Different Beginning
Imagine you’re sitting in a computer lab. The teacher gives you a challenge: “Build a small
web form where a user can type a number, click a button, and instantly see its factorial.”
At first, it sounds like a puzzle. But then you realize—it’s just like building a tiny machine.
The form is the machine’s body, the JavaScript code is its brain, and the validations are like
safety checks to make sure the machine doesn’t break when someone enters wrong input.
By the end of this journey, you’ll have a neat little web app that not only calculates factorials
but also teaches you the importance of clean design and error handling.
Step 1: Understanding Factorial
Before coding, let’s recall what factorial means.
• The factorial of a number n (written as n!) is the product of all positive integers from
1 to n.
• Example:
o 5! = 5 × 4 × 3 × 2 × 1 = 120
o 0! = 1 (by definition)
• Factorial is not defined for negative numbers.
Easy2Siksha.com
So our program must:
1. Accept a number.
2. Check if it’s valid (non-negative integer).
3. Calculate factorial.
4. Display the result.
Step 2: Designing the Form
We need two text boxes and one button:
• First text box: Input number.
• Button: “Calculate Factorial.”
• Second text box: Display result.
Here’s the HTML structure:
html
<!DOCTYPE html>
<html>
<head>
<title>Factorial Calculator</title>
</head>
<body>
<h2>Factorial Calculator</h2>
<form>
Enter a number:
<input type="text" id="numInput"><br><br>
Result:
<input type="text" id="resultBox" readonly><br><br>
<button type="button" onclick="calculateFactorial()">Calculate Factorial</button>
</form>
<script src="factorial.js"></script>
</body>
</html>
Notice:
• The id attributes (numInput, resultBox) help JavaScript find these elements.
• The readonly attribute ensures the result box cannot be edited manually.
Step 3: Writing the JavaScript Logic
Easy2Siksha.com
Now comes the brain of our machine.
javascript
function calculateFactorial() {
// Get input value
let num = document.getElementById("numInput").value;
// Validation: check if input is a number
if (isNaN(num) || num === "") {
alert("Please enter a valid number!");
return;
}
// Convert to integer
num = parseInt(num);
// Validation: check if non-negative
if (num < 0) {
alert("Factorial is not defined for negative numbers!");
return;
}
// Calculate factorial
let fact = 1;
for (let i = 1; i <= num; i++) {
fact *= i;
}
// Show result
document.getElementById("resultBox").value = fact;
}
Step 4: Adding Validations
Why are validations important? Imagine a user types “hello” instead of a number. Without
validation, the program would break. Validations act like a teacher gently correcting
mistakes.
Our validations include:
1. Empty input check → Show alert if no number is entered.
2. Non-numeric check → Show alert if input is not a number.
3. Negative number check → Show alert if input is negative.
This ensures the program is foolproof and user-friendly.
Diagram: Flow of the Program
Easy2Siksha.com
This flowchart shows how the program checks input step by step before calculating.
Step 5: Example Run
• User enters 5 in the first box.
• Clicks “Calculate Factorial.”
• JavaScript runs the loop: 1 × 2 × 3 × 4 × 5 = 120.
• The second box shows 120.
If the user enters -3, an alert pops up: “Factorial is not defined for negative numbers!”
If the user enters hello, an alert says: “Please enter a valid number!”
Why This Matters in System Design
This small exercise teaches big lessons:
• User Interface (UI): Forms make interaction simple.
• Validation: Protects against errors and misuse.
• Logic: Factorial calculation shows how loops work.
• Output Handling: Results must be displayed clearly.
In real-world projects, the same principles apply—whether you’re building a banking system
or an e-commerce site.
Conclusion
Creating a factorial calculator with two text boxes and a button may seem like a small task,
but it’s a perfect example of how HTML, JavaScript, and validation work together.
Easy2Siksha.com
• The form is the stage.
• The JavaScript function is the actor performing the calculation.
• The validations are the director ensuring the performance goes smoothly.
For students, this makes coding less intimidating—it’s just building a small machine step by
step. For examiners, this answer is enjoyable because it doesn’t just show code, but narrates
the story of how the program works, why validations matter, and how everything connects.
So the next time you see a factorial problem, don’t just think of numbers—think of it as a
chance to design a tiny, intelligent system that listens, checks, calculates, and responds.
SECTION-B
3. Explain various inbuilt string and file handling functions available in PHP.
Ans: Various Inbuilt String and File Handling Functions in PHP
A Fresh Beginning: Imagine a Library
Think of a huge library. This library has countless books (like the files in a computer) and
every page of the book has sentences and words (like the strings in programming).
Now, imagine you are the librarian. To do your job, you must be able to:
• Find a word inside a page.
• Replace a wrong word with the correct one.
• Count how many times a word appears.
• Open a book, read it, update it, and sometimes even create a new one.
In PHP, you are exactly like this librarian. PHP provides you inbuilt string functions (to play
with words and characters) and file handling functions (to work with files like opening,
reading, writing, and closing them).
Let’s walk through these two categories step by step, just like a story unfolding.
Part 1: String Functions in PHP
A string is simply a sequence of characters—letters, numbers, symbols, spaces—all packed
together. In PHP, string functions help us perform magic on words, just like editing text in a
word processor.
Easy2Siksha.com
Here are some of the most common and useful string functions:
1. strlen() – Length of a String
If you want to know how long a rope is, you measure it. Similarly, if you want to know how
many characters a string has, you use strlen().
echo strlen("Hello World"); // Output: 11
It counts spaces too!
2. str_word_count() – Counting Words
When reading a book, you might want to know how many words are on a page.
echo str_word_count("PHP is fun and powerful!"); // Output: 5
3. strrev() – Reverse a String
It’s like reading a word in the mirror.
echo strrev("Hello"); // Output: olleH
4. strpos() – Finding Position of a Word
Imagine searching for a word in a dictionary. strpos() tells you where it first appears.
echo strpos("I love PHP", "PHP"); // Output: 7
5. str_replace() – Replace a Word
Suppose you typed “Helo” instead of “Hello.” With str_replace(), you can fix it.
echo str_replace("world", "PHP", "Hello world!"); // Output: Hello PHP!
6. strtolower() and strtoupper() – Changing Case
• strtolower() makes all letters small.
• strtoupper() makes all letters capital.
echo strtolower("HELLO"); // hello
Easy2Siksha.com
echo strtoupper("php"); // PHP
7. ucfirst() and ucwords() – Smart Capitalization
• ucfirst() makes the first letter of a string capital.
• ucwords() makes the first letter of each word capital.
echo ucfirst("php is amazing"); // Php is amazing
echo ucwords("php is amazing"); // Php Is Amazing
8. trim() – Removing Extra Spaces
Sometimes, a text has unnecessary spaces at the start or end. trim() cleans them.
$text = " Hello PHP! ";
echo trim($text); // Output: Hello PHP!
9. substr() – Cutting a Piece of String
Want only a part of the sentence? Use substr().
echo substr("Programming", 0, 6); // Output: Progra
10. explode() and implode() – Breaking and Joining Strings
• explode() breaks a string into an array.
• implode() joins an array into a string.
$words = explode(" ", "I love PHP");
print_r($words); // Array ( [0] => I [1] => love [2] => PHP )
echo implode("-", $words); // I-love-PHP
Why String Functions Are Powerful
Just like a librarian can quickly find, replace, and organize words in books, PHP’s string
functions make text handling super easy. Without them, tasks like searching or editing
words would take hours.
Part 2: File Handling Functions in PHP
Now let’s move from words (strings) to books (files).
Easy2Siksha.com
Files store information, and PHP allows us to open, read, write, and close them, just like a
librarian dealing with books in a library.
Here are the main functions:
1. fopen() – Opening a File
Before reading or writing, you must open the book.
$file = fopen("example.txt", "r");
• "r" means open for reading.
• "w" means open for writing (and erase old data).
• "a" means open for writing but append at the end.
2. fread() – Reading from a File
Once the book is open, you can read it.
$file = fopen("example.txt", "r");
echo fread($file, filesize("example.txt"));
fclose($file);
3. fgets() – Reading One Line
If you only want the first line of a book:
$file = fopen("example.txt", "r");
echo fgets($file);
fclose($file);
4. fwrite() – Writing into a File
If you want to add new text into a book:
$file = fopen("newfile.txt", "w");
fwrite($file, "Hello, PHP File Handling!");
fclose($file);
5. fclose() – Closing the File
Just like you close a book after reading, you must close a file:
fclose($file);
Easy2Siksha.com
6. file_get_contents() – Reading Entire File in One Go
Instead of line by line, this function grabs the whole book.
echo file_get_contents("example.txt");
7. file_put_contents() – Writing Entire File in One Go
A shortcut to write text directly into a file.
file_put_contents("example.txt", "New content here!");
8. unlink() – Deleting a File
Like removing a book permanently from the library.
unlink("oldfile.txt");
Diagram: String vs File Functions
Wrapping Up: The Librarian’s Wisdom
So, in our story, you—the librarian—are now fully equipped. With string functions, you can
handle every word and sentence neatly. With file handling functions, you can manage
books effectively: open them, read them, update them, or even throw them away.
Easy2Siksha.com
In real-world projects, PHP developers rely heavily on these functions. Whether it’s creating
a blog system, handling user data, or building a text-processing tool, these functions are the
backbone.
The magic of PHP lies in these ready-made tools—it saves time, reduces errors, and
makes programming as smooth as reading your favourite storybook.
4. (a) Explain Session Management in PHP.
(b) What is a Cookie? What is its use? Write script in PHP to create and read a cookie.
Ans: Session Management and Cookies in PHP
A Different Beginning
Imagine you walk into a library. The librarian greets you and hands you a card with a unique
number. Every time you borrow or return a book, she doesn’t ask your name again—she
just checks your card number and instantly knows your history.
This is exactly how sessions and cookies work in web development. The web, by default, is
“stateless”—it forgets who you are every time you load a new page. But with sessions and
cookies, PHP gives websites a memory. They allow the site to recognize you, remember your
preferences, and keep track of your actions.
Let’s explore both concepts step by step.
Part (a): Session Management in PHP
What is a Session?
A session is like a temporary notebook that the server keeps for each user. When you visit a
website, PHP creates a unique session ID for you. This ID is usually stored in your browser as
a small cookie or passed in the URL.
Whenever you move from one page to another, the server uses this ID to recall your stored
information—like your username, shopping cart items, or login status.
In short: Sessions allow data to persist across multiple pages.
How Sessions Work in PHP
1. Starting a Session
php
<?php
Easy2Siksha.com
session_start(); // Start the session
?>
This must be written at the top of the PHP page before any HTML output.
2. Storing Data in a Session
php
<?php
session_start();
$_SESSION["username"] = "Rishabh";
$_SESSION["role"] = "Student";
?>
Here, the server remembers that the user’s name is Rishabh and role is Student.
3. Accessing Session Data
php
<?php
session_start();
echo "Welcome, " . $_SESSION["username"];
?>
Output: Welcome, Rishabh
4. Destroying a Session
php
<?php
session_start();
session_destroy(); // Ends the session
?>
This is like tearing the notebook apart—no data remains.
Diagram: How Session Works
Easy2Siksha.com
Uses of Sessions
• Login systems (remembering who is logged in).
• Shopping carts in e-commerce sites.
• Storing temporary preferences (like theme or language).
Part (b): Cookies in PHP
What is a Cookie?
A cookie is like a sticky note that the server places on your browser. Unlike sessions (which
store data on the server), cookies store small pieces of data on the client’s computer.
Every time you revisit the site, your browser sends the cookie back to the server, reminding
it who you are.
In short: Cookies are client-side storage used for remembering information across
visits.
Creating and Reading Cookies in PHP
1. Creating a Cookie
php
<?php
$cookie_name = "user";
$cookie_value = "Rishabh";
setcookie($cookie_name, $cookie_value, time() + (86400 * 30), "/");
// 86400 = 1 day, so cookie lasts 30 days
?>
Note: setcookie() must be called before any HTML output.
2. Reading a Cookie
php
<?php
if(isset($_COOKIE["user"])) {
echo "Cookie 'user' is set!<br>";
echo "Value is: " . $_COOKIE["user"];
} else {
echo "Cookie is not set!";
}
?>
Output:
Code
Easy2Siksha.com
Cookie 'user' is set!
Value is: Rishabh
Diagram: How Cookies Work
Uses of Cookies
• Remembering login details (e.g., “Keep me signed in”).
• Storing user preferences (language, theme).
• Tracking user behavior (analytics, ads).
• Shopping carts (in simpler sites).
Sessions vs Cookies
Feature
Sessions (Server-side)
Cookies (Client-side)
Storage
Location
Server
Browser (user’s computer)
Security
More secure
Less secure (user can modify)
Data Size
Large (depends on server)
Small (usually < 4KB)
Lifetime
Ends when browser closes
(default)
Can persist for days/months
Example Use
Login, shopping cart
Remember username,
preferences
Example Story to Illustrate
Imagine you log into an online exam portal:
• The session remembers your login status as you move from the dashboard to the
test page. Without it, you’d have to log in again on every page.
• The cookie remembers your preferred font size and theme, so even if you come back
tomorrow, the site looks the same for you.
Together, they make the experience smooth and personalized.
Easy2Siksha.com
Conclusion
• Session Management in PHP is like the server keeping a temporary notebook for
each user, ensuring continuity across pages.
• Cookies in PHP are like sticky notes stored in the browser, reminding the server of
user preferences even after the session ends.
• Both are essential for building interactive, user-friendly web applications.
For students, this makes the concept easy to grasp—because it’s not just about code, but
about how websites “remember” us. For examiners, it’s enjoyable to read because the
answer flows like a story, with diagrams, examples, and clear comparisons.
SECTION-C
5. Which are reasons to use AL and ML in websites ?
Ans: A Gentle Beginning
Imagine you’re building a small online diary website. Users type their feelings, upload small
text files, maybe even search for words inside their saved notes. Now, think about it—if you,
the developer, had to manually manage every single word, sentence, or file, life would be
very tough.
That’s where PHP comes in with its inbuilt string functions and file handling functions—like
a toolbox full of ready-made tools. And in modern times, websites don’t just stop at
handling text and files. They’ve become smart—thanks to AI and ML. That’s why Amazon
recommends you a product, Netflix suggests a series, or a chatbot answers your questions.
So, let’s take this as a story of a web developer’s journey, moving step by step.
Part 1: String Functions in PHP – The Magic with Words
Whenever you deal with text in a website (usernames, passwords, comments, blog posts,
search queries), you need string functions. PHP offers dozens of them. Let’s go through
some important ones, but in a way you’ll actually remember.
1. Changing Case (Upper or Lower)
• strtoupper("hello") → HELLO
• strtolower("HELLO") → hello
Use case: If you want usernames to be case-insensitive (Ravi, ravi, or RAVI should all be
treated the same).
Easy2Siksha.com
2. Finding Length of a String
• strlen("Hello World") → 11
Use case: Checking if a password is at least 8 characters.
3. Removing Extra Spaces
• trim(" hello ") → "hello"
• ltrim(" hello") → "hello"
• rtrim("hello ") → "hello"
Use case: Cleaning user input before storing in a database.
4. Finding and Replacing Words
• str_replace("bad", "good", "You are bad") → "You are good"
Use case: Replacing inappropriate words in comments (bad word filters).
5. Breaking and Joining Strings
• explode(" ", "I love PHP") → Array: ["I", "love", "PHP"]
• implode("-", ["2025", "09", "28"]) → "2025-09-28"
Use case: Splitting a sentence into words or joining dates into a single format.
6. Searching in Strings
• strpos("Hello World", "World") → 6 (position starts at 0)
Use case: Search feature in a diary or blog.
7. Substrings
Easy2Siksha.com
• substr("Hello World", 0, 5) → "Hello"
Use case: Displaying a short preview of a long article.
Diagram (String Functions in PHP):
Part 2: File Handling Functions in PHP – Playing with Files
Now, think of your diary website again. People write notes, and these notes are saved in
files. That’s where PHP’s file handling functions shine.
1. Opening a File
• fopen("file.txt", "r") → Opens file for reading
• fopen("file.txt", "w") → Opens for writing (old data erased)
• fopen("file.txt", "a") → Opens for appending (adds at the end)
2. Reading a File
• fread($file, filesize("file.txt")) → Reads entire file
• fgets($file) → Reads a single line
• fgetc($file) → Reads one character
3. Writing to a File
Easy2Siksha.com
• fwrite($file, "Hello World") → Writes data into the file
4. Closing a File
• fclose($file) → Always close after reading/writing to free memory.
5. Checking File Existence
• file_exists("file.txt") → true/false
6. Reading Entire File Directly
• file_get_contents("file.txt") → Reads file into a string
• file_put_contents("file.txt", "New Data") → Writes data directly
Diagram (File Handling in PHP):
Together, these functions make a website capable of managing notes, resumes, logs, or
any user-generated content.
Part 3: Why Use AI and ML in Websites?
Easy2Siksha.com
Now let’s jump to the second part of the question. Once our diary website is working, how
do we make it smarter? That’s where AI (Artificial Intelligence) and ML (Machine Learning)
come into play.
Think of it like this:
• Without AI/ML: The website is like a diary—it just stores and shows things.
• With AI/ML: The website becomes like a friend who learns your mood, suggests
what to write, and even recommends motivational quotes.
Key Reasons to Use AI and ML in Websites
1. Personalization
o Example: Amazon recommends products based on your past shopping.
o Benefit: Increases user satisfaction and sales.
2. Chatbots and Customer Support
o Example: Banking websites use chatbots to answer FAQs.
o Benefit: Saves time, available 24/7.
3. Search Optimization
o Google search uses ML to understand what you mean, not just what you
type.
o Benefit: Accurate results, happier users.
4. Fraud Detection
o Example: Payment gateways use ML to detect unusual transactions.
o Benefit: Security and trust.
5. Voice and Image Recognition
o Example: Instagram identifies faces, Alexa recognizes your voice.
o Benefit: Easy and modern user interaction.
6. Data Analysis
o Websites use ML to study user behavior—what pages are visited, how much
time is spent.
o Benefit: Improves website design and business strategies.
Diagram (AI & ML in Websites):
Easy2Siksha.com
Wrapping It Up
So, the story goes like this:
• PHP string functions are your dictionary—helping you play with words.
• PHP file handling functions are your notebook—storing and retrieving data.
• AI and ML are like a smart assistant—making your website think, learn, and talk.
A good website today is not just about storing and showing information; it’s about being
interactive, secure, and smart. That’s why we mix these three ingredients—PHP functions +
File Handling + AI/ML—to build something that feels alive.
6. Which are different types of hosting? Give steps to host your website on a remote
server.
Ans: Types of Hosting and Steps to Host a Website on a Remote Server
A Different Beginning
Imagine you’ve just created a beautiful house design on paper. You’ve drawn the rooms,
painted the walls, and even decorated the interiors. But here’s the problem: the house only
exists in your notebook. If you want people to actually visit it, you need to build it on land.
A website is exactly like that. You can design it on your computer with HTML, CSS, and
JavaScript, but unless you put it on a server (the land), no one else can visit it. This process
of putting your website on a server is called hosting.
Now, just like there are different kinds of land—small plots, shared apartments, luxury
villas—there are different types of hosting. Let’s explore them first.
Easy2Siksha.com
Types of Hosting
1. Shared Hosting
• Many websites share the same server.
• Affordable, beginner-friendly, but limited in performance.
• Analogy: Like living in an apartment building—you share resources (water,
electricity) with neighbors.
2. Virtual Private Server (VPS) Hosting
• A single server is divided into virtual sections, each acting like a mini-server.
• More control and performance than shared hosting.
• Analogy: Like owning a flat in a building—you have your own space, but still share
the building infrastructure.
3. Dedicated Hosting
• You rent the entire server for yourself.
• High performance, full control, but expensive.
• Analogy: Like owning a bungalow—you don’t share with anyone.
4. Cloud Hosting
• Your website is hosted on multiple servers connected in the cloud.
• Highly scalable, reliable, and flexible.
• Analogy: Like living in multiple houses at once—if one has a problem, you can move
to another instantly.
5. Managed WordPress Hosting
• Special hosting optimized for WordPress websites.
• Comes with automatic updates, backups, and security.
• Analogy: Like hiring a caretaker who manages your house for you.
6. Reseller Hosting
• You buy hosting space and resell it to others.
• Useful for entrepreneurs who want to start their own hosting business.
7. Colocation Hosting
• You own the server hardware but place it in a data center for better internet speed
and security.
• Analogy: Like owning your house but keeping it inside a gated community with 24/7
security.
8. Free Hosting
Easy2Siksha.com
• Provided at no cost, but with limitations (ads, low speed, no support).
• Good for learning, not for professional use.
Diagram: Types of Hosting
Steps to Host Your Website on a Remote Server
Now that we know the types of hosting, let’s walk through the actual steps of putting your
website online.
Step 1: Buy a Domain Name
• A domain is your website’s address (e.g., www.rishabh.com).
• Without it, people won’t know how to reach your site.
• You can buy domains from providers like GoDaddy, Namecheap, or Google Domains.
Analogy: If hosting is your house, the domain is your street address.
Step 2: Choose a Hosting Provider
• Select the type of hosting based on your needs (shared for beginners, VPS/dedicated
for bigger projects).
• Popular providers: Bluehost, Hostinger, SiteGround, AWS, Google Cloud.
Step 3: Link Domain with Hosting
• Update your domain’s DNS (Domain Name System) settings to point to your hosting
server.
• This is like telling the post office where to deliver letters for your address.
Easy2Siksha.com
Step 4: Upload Website Files
There are two main ways:
1. Using cPanel File Manager (a web-based control panel).
2. Using FTP (File Transfer Protocol) with tools like FileZilla.
You upload your HTML, CSS, JS, and image files into the server’s public_html folder.
Step 5: Set Up Database (if needed)
• If your site uses WordPress, PHP, or any CMS, you’ll need a MySQL database.
• Create it via cPanel and connect it to your site.
Step 6: Test Your Website
• Open your domain in a browser.
• Check if all pages load correctly.
• Fix broken links, missing images, or errors.
Step 7: Add Security (SSL Certificate)
• Install an SSL certificate so your site uses https:// instead of http://.
• This ensures data is encrypted and builds trust with users.
Step 8: Maintain and Update
• Regularly update your site’s content, plugins, and security patches.
• Backup your site to avoid data loss.
Diagram: Steps to Host a Website
Easy2Siksha.com
Why Hosting Matters
Without hosting, your website is like a diary locked in your drawer—only you can see it.
Hosting puts it on the internet’s stage, where the whole world can visit.
• Shared hosting is perfect for beginners.
• VPS and dedicated hosting are for professionals.
• Cloud hosting is for scalability.
• Cookies and sessions (from earlier topics) come alive only when your site is hosted.
Conclusion
Hosting is the bridge between your computer and the world. The types of hosting—shared,
VPS, dedicated, cloud, WordPress, reseller, colocation, and free—are like different kinds of
homes for your website. The steps to host—buying a domain, choosing hosting, linking DNS,
uploading files, setting up databases, testing, securing, and maintaining—are the roadmap
to putting your site online.
For students, this makes hosting less intimidating—it’s just like moving into a new house.
For examiners, this answer is enjoyable because it doesn’t just list steps, but narrates the
journey of a website finding its home on the internet.
SECTION-D
7. What is difference between AR and VR? How are these helpful in websites?
Ans: Imagine you are standing in your living room. You pick up your phone and point the
camera at an empty corner of the room. Suddenly, on your screen, a 3D sofa appears right
in that corner — you can rotate it, change its color, and check if it fits. But when you look up
without the phone, the sofa is not really there.
This is Augmented Reality (AR) — it adds digital objects into your real world.
Now, let’s take another situation. You put on a special headset, and suddenly you are no
longer in your room. Instead, you are walking on the moon, seeing stars, bouncing on
craters, and even hearing the silence of space. You are completely cut off from your living
room and fully inside a different world.
This is Virtual Reality (VR) — it takes you out of your real world and places you in a fully
digital world.
So, in short:
• AR enhances reality.
• VR replaces reality.
Easy2Siksha.com
The Core Difference Between AR and VR
Let’s break it down into simple points:
Feature
Augmented Reality (AR)
Virtual Reality (VR)
Definition
Adds digital elements to the real world.
Creates a fully digital
environment.
Experience
Mix of real + virtual.
Only virtual, no real-world
view.
Device
Needed
Smartphone, AR glasses.
VR headset, controllers.
Reality
Connection
You still see and interact with the real
world.
You are cut off from the real
world.
Examples
Pokémon Go, AR furniture apps, AR
filters on Instagram/Snapchat.
VR games, VR travel
experiences, VR classrooms.
Diagram
Here’s a simple diagram to help:
How AR and VR Are Helpful in Websites
Now comes the exciting part: How do these amazing technologies make websites better?
1. E-commerce websites
• AR use: Imagine buying shoes online. Instead of just seeing a photo, you can try
them on virtually with AR by pointing your phone camera at your feet.
Easy2Siksha.com
• VR use: You can take a virtual walk inside a clothing store, look at products, and
even feel like you are shopping in real life.
This makes online shopping much more interactive and trustworthy.
2. Educational websites
• AR use: Students can point their phone at a book diagram and see it come alive in
3D. For example, a heart diagram can start beating in 3D.
• VR use: Entire virtual classrooms can be created where students can walk into a
virtual lab, conduct experiments, or explore ancient civilizations.
This makes learning not just informative, but also fun and memorable.
3. Travel and tourism websites
• AR use: You can point your phone at a map and see 3D monuments popping up,
along with information about them.
• VR use: You can take a virtual tour of the Eiffel Tower, the Pyramids, or the Taj
Mahal right from your home.
This helps people decide where to travel and builds excitement.
4. Real estate websites
• AR use: See how a sofa, bed, or dining table will look in your actual room before
buying it.
• VR use: Take a virtual walkthrough of a flat or bungalow without visiting in person.
This saves time, builds trust, and helps in making better decisions.
5. Entertainment and gaming websites
• AR use: Play games where characters appear in your real surroundings (like
Pokémon Go).
• VR use: Play fully immersive games where you become the hero in a fantasy world.
This makes websites more engaging and increases user time on them.
Easy2Siksha.com
6. Healthcare websites
• AR use: Patients can see a 3D demo of their surgery procedure or how a medicine
works inside the body.
• VR use: Medical students can perform virtual surgeries for practice without any real-
life risk.
This builds trust in patients and helps in advanced training.
7. Corporate and Business websites
• AR use: Websites can allow customers to preview products in 3D before purchase.
• VR use: Businesses can hold virtual meetings or conferences, giving a real-life
experience even if people are miles apart.
This improves professional interactions and client satisfaction.
Why AR and VR Make Websites Special
• They attract more visitors because people love new technology.
• They increase trust because users can try products before buying.
• They save time and cost (e.g., virtual tours instead of physical visits).
• They make websites fun, interactive, and modern, which is important in today’s
competitive digital world.
Conclusion
Think of AR and VR as two magical tools:
• AR is like wearing magical glasses that make your real world more interesting by
adding digital elements.
• VR is like stepping into a magical portal that takes you to a completely different
world.
Both of them are not just about gaming or fun — they are reshaping websites in education,
business, healthcare, tourism, real estate, and e-commerce.
In simple words, AR helps us bring the digital into our reality, while VR helps us escape into
a new reality. Together, they are making the internet more interactive, immersive, and
human-friendly.
Easy2Siksha.com
8. What are advantages and disadvantages of SPA? How is Angular JS helpful in
creating SPA websites?
Ans: Advantages and Disadvantages of SPA & Role of AngularJS
A Different Beginning
Think back to the early days of the internet. You clicked a link, and the whole page blinked,
reloaded, and then showed you the next page. It felt a bit like turning the pages of a heavy
book—slow, clunky, and sometimes frustrating.
Then came a new idea: What if the page didn’t reload every time? What if only the part that
changed was updated, while the rest stayed the same?
That idea gave birth to Single Page Applications (SPAs)—websites that feel smooth, fast,
and app-like. And one of the frameworks that made SPAs practical and powerful was
AngularJS.
Let’s explore this story step by step.
What is a Single Page Application (SPA)?
A Single Page Application is a web application that loads a single HTML page and
dynamically updates content as the user interacts with it. Instead of reloading the entire
page from the server, SPAs use AJAX, JavaScript, and APIs to fetch only the required data
and update the view instantly.
Examples: Gmail, Google Drive, Facebook, Twitter, Netflix.
Advantages of SPA
1. Fast and Responsive
• Since only parts of the page update, SPAs feel much faster than traditional websites.
• Example: In Gmail, when you click on an email, only the content area changes—not
the whole page.
2. Smooth User Experience
• No page reloads = no flickering or waiting.
• Feels like using a mobile app rather than a clunky website.
3. Reduced Server Load
• The server sends the main page once, and after that, only data is exchanged.
• This reduces bandwidth usage and server stress.
Easy2Siksha.com
4. Offline Support (with caching)
• SPAs can cache data locally, allowing limited offline functionality.
• Example: Google Docs lets you continue typing even without internet.
5. Separation of Frontend and Backend
• Backend developers can focus on APIs.
• Frontend developers can focus on UI.
• This makes teamwork easier and more efficient.
6. Reusability of Code
• Components can be reused across different parts of the application.
Disadvantages of SPA
1. Poor SEO (Search Engine Optimization)
• Since content is loaded dynamically with JavaScript, search engines may struggle to
index it.
• Example: A blog built as SPA may not rank well on Google without extra effort.
2. Initial Load Time
• The first time you open an SPA, it loads a large bundle of JavaScript, which can feel
slow.
3. Browser History Issues
• Traditional websites have unique URLs for each page.
• In SPAs, managing back/forward buttons requires extra coding with the HTML5
History API.
4. Security Concerns
• Since much of the logic runs on the client side, SPAs can be more vulnerable to
attacks like XSS (Cross-Site Scripting).
5. JavaScript Dependency
• If JavaScript is disabled in the browser, the SPA won’t work at all.
Diagram: Advantages vs Disadvantages of SPA
Easy2Siksha.com
How AngularJS Helps in Creating SPAs
Now comes the hero of our story: AngularJS.
AngularJS, developed by Google, is a JavaScript framework designed to make building SPAs
easier, faster, and more structured.
Key Features of AngularJS for SPAs
1. Two-Way Data Binding
• Any change in the model (data) automatically updates the view (UI), and vice versa.
• Example: In a form, if you type your name, it instantly reflects wherever it’s bound in
the page.
2. Single Page Routing
• AngularJS provides built-in routing (ngRoute module).
• This allows different “views” (pages) to load dynamically without reloading the
whole page.
• Example: In a shopping site, clicking “Cart” loads the cart view instantly without
refreshing.
3. Directives
• AngularJS introduces custom HTML tags and attributes (like ng-model, ng-repeat).
• These make the code cleaner and more expressive.
4. Dependency Injection
• AngularJS manages dependencies automatically, making code modular and testable.
Easy2Siksha.com
5. MVC Architecture (Model-View-Controller)
• Separates data (Model), UI (View), and logic (Controller).
• This makes large SPAs easier to manage.
6. Reusable Components
• Developers can create reusable components, reducing duplication.
7. Testing Support
• AngularJS was designed with testing in mind, making debugging easier.
Diagram: AngularJS in SPA Workflow
This shows how AngularJS handles user actions, routes them, updates data, and refreshes
the UI—all without reloading the page.
Real-Life Example
Think of Gmail:
• When you click on an email, the inbox doesn’t reload. Only the content area
updates.
• AngularJS (and similar frameworks) make this possible by handling routing, data
binding, and dynamic updates behind the scenes.
Conclusion
Single Page Applications (SPAs) revolutionized the web by making it faster, smoother, and
more app-like. They come with clear advantages—speed, responsiveness, reduced server
load—but also disadvantages like SEO challenges, initial load time, and security concerns.
Easy2Siksha.com
AngularJS plays a crucial role in overcoming many of these challenges. With features like
two-way data binding, routing, directives, MVC architecture, and dependency injection,
AngularJS makes building SPAs structured, efficient, and developer-friendly.
“This paper has been carefully prepared for educational purposes. If you notice any mistakes or
have suggestions, feel free to share your feedback.”
